<template>
  <div class="w100 h100" ref="charts"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import jiangduJSON from "./jiangduGRID.json";
import { centerData } from "./centerData.js";

const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({}),
  },
});

const charts = ref();
let myChart = null;
let mapData = reactive({});

const initData = () => {
  mapData = {
    type: "FeatureCollection",
    features: [],
  };

  jiangduJSON.forEach((geo, index) => {
    const json = JSON.parse(geo.geometry);
    mapData.features.push({
      type: "Feature",
      properties: {
        adcode: 320500 + (index - 0) + 1,
        name: geo.gridName.replace("网格", ""),
        center: centerData[index].center,
        centroid: centerData[index].center,
        childrenNum: 0,
        level: "district",
        parent: { adcode: 320500 },
        subFeatureIndex: index,
        acroutes: [100000, 320000, 320500],
      },
      geometry: {
        type: "MultiPolygon",
        coordinates: [json.coordinates],
      },
    });
  });
  console.log("jiangduJSON :>> ", mapData);
};

const initChart = (name) => {
  if (!myChart) {
    myChart = echarts.init(charts.value);
  }
  initData();
  myChart.showLoading();
  setTimeout(() => {
    myChart.hideLoading();
  }, 500);
  echarts.registerMap("jiangduMap", mapData);
  let option = {
    // aspectScale: 0.85, // 这个参数用于 scale 地图的长宽比，如果设置了projection则无效。
    tooltip: {
      show: true,
      textStyle: {
        color: "#fff",
      },
      backgroundColor: "rgba(0,0,0,0.5)",
      borderColor: "rgba(0,0,0,0)",
      extraCssText: "box-shadow:0 0 0 rgba(0,0,0,0)",
      // trigger: "item",
      formatter: (e) => {
        console.log(e);
        return "eee";
      },
    },
    geo: {
      type: "map",
      silent: false,
      map: "jiangduMap", // map要与registerMap第一个属性一致
      show: true,
      zoom: 1.2, //设置初始化的缩放比例，原始为1
      label: {
        normal: {
          show: true,
          textStyle: {
            color: "#ffffff00",
          },
          borderRadius: 10,
        },
        emphasis: {
          textStyle: {
            color: "#fff",
          },
        },
      },
      itemStyle: {
        normal: {
          areaColor: "#81C0BC",
          borderColor: "#ffffff",
          borderWidth: 2,
          shadowColor: "#81C0BC7f",
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 20,
        },
        emphasis: {
          areaColor: "rgb(25, 182, 187)", //悬浮背景
          textStyle: {
            color: "#fff",
          },
        },
      },
      roam: true,
      data: scatterData(),
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        geoIndex: 0,
        label: {
          show: true,
          color: "#333",
          fontWeight: 800,
          fontSize: 15,
          formatter: function (e) {
            return e.data.value[2];
          },
        },
        symbol: "circle",
        symbolSize: [40, 40],
        itemStyle: {
          color: "#f8ee115f",
        },
        silent: true,
        data: scatterData(),
      },
    ],
  };
  myChart.setOption(option, true);
  myChart.on("click", (params) => {
    if (params.componentType === "geo") {
      // 处理地图点击事件
      console.log("地图被点击", params);
    }
  });
};

// 打点
const scatterData = () => {
  return centerData.map((item) => {
    return {
      name: item.name,
      value: [...item.center, item.value],
    };
  });
};

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});
</script>

<style lang="scss" scoped></style>
